<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>联系人数据仪表盘</title>
    <th:block th:include="include :: header('联系人数据仪表盘')" />
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f5f7fa;
            margin: 0;
            padding: 0;
        }

        .wrapper {
            padding: 20px;
        }

        .ibox {
            margin-bottom: 20px;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .ibox-title {
            border-bottom: 1px solid #e7eaec;
            padding: 15px 20px;
            min-height: 50px;
        }

        .ibox-title h5 {
            display: inline-block;
            font-size: 16px;
            margin: 0;
            padding: 0;
            text-overflow: ellipsis;
            float: left;
        }

        .ibox-content {
            padding: 15px 20px;
            clear: both;
        }

        .echarts {
            width: 100%;
            height: 400px;
        }

        .chart-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .chart-box {
            width: 48%;
            margin-bottom: 20px;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            padding: 15px;
        }

        .chart-title {
            font-size: 16px;
            margin-bottom: 15px;
            text-align: center;
            color: #333;
            font-weight: 600;
        }

        @media (max-width: 768px) {
            .chart-box {
                width: 100%;
            }
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>联系人数据总览</h5>
                </div>
                <div class="ibox-content">
                    <div class="chart-container">
                        <!-- 柱状图 -->
                        <div class="chart-box">
                            <div class="chart-title">联系人分类统计柱状图</div>
                            <div class="echarts" id="bar-chart"></div>
                        </div>

                        <!-- 饼图 -->
                        <div class="chart-box">
                            <div class="chart-title">联系人分类统计饼图</div>
                            <div class="echarts" id="pie-chart"></div>
                        </div>

                        <!-- 折线图 -->
                        <div class="chart-box">
                            <div class="chart-title">月度新增联系人趋势</div>
                            <div class="echarts" id="line-chart"></div>
                        </div>

                        <!-- 雷达图 -->
                        <div class="chart-box">
                            <div class="chart-title">联系人分类雷达图</div>
                            <div class="echarts" id="radar-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />

<script th:inline="javascript">
    /*<![CDATA[*/
    $(function() {
        // 准备分类数据
        const categories = [];
        const dataCountByCategory = [[${dataCountByCategory}]];
        const pieData = [];
        const barData = [];

        for (let i = 0; i < dataCountByCategory.length; i++) {
            const item = dataCountByCategory[i];
            const key = Object.keys(item)[0];
            const name = item[Object.keys(item)[1]];
            const value = item[key];

            categories.push(name);
            pieData.push({ name: name, value: value });
            barData.push(value);
        }

        // 准备月度数据
        const months = [[${months}]];
        const counts = [[${counts}]];

        // 1. 柱状图
        const barChart = echarts.init(document.getElementById('bar-chart'));
        const barOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: categories,
                axisLabel: {
                    rotate: 30
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '联系人数量',
                type: 'bar',
                data: barData,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#83bff6' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#0078ff' }
                    ]),
                    borderRadius: [4, 4, 0, 0]
                },
                label: {
                    show: true,
                    position: 'top'
                }
            }]
        };
        barChart.setOption(barOption);

        // 2. 饼图
        const pieChart = echarts.init(document.getElementById('pie-chart'));
        const pieOption = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: categories
            },
            series: [{
                name: '联系人分类',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '18',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: pieData
            }]
        };
        pieChart.setOption(pieOption);

        // 3. 折线图
        const lineChart = echarts.init(document.getElementById('line-chart'));
        const lineOption = {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: months
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '新增联系人数量',
                type: 'line',
                data: counts,
                smooth: true,
                itemStyle: {
                    color: '#5470C6'
                },
                areaStyle: {
                    color: 'rgba(84,112,198,0.3)'
                },
                label: {
                    show: true,
                    position: 'top'
                }
            }]
        };
        lineChart.setOption(lineOption);

        // 4. 雷达图
        const radarChart = echarts.init(document.getElementById('radar-chart'));
        const radarOption = {
            title: {
                text: '联系人分类分布'
            },
            tooltip: {},
            legend: {
                data: ['分类分布']
            },
            radar: {
                indicator: categories.map(name => {
                    return { name: name, max: Math.max(...barData) * 1.2 };
                })
            },
            series: [{
                name: '联系人分类',
                type: 'radar',
                data: [{
                    value: barData,
                    name: '分类分布'
                }]
            }]
        };
        radarChart.setOption(radarOption);

        // 窗口大小变化时重绘图表
        window.addEventListener('resize', function() {
            barChart.resize();
            pieChart.resize();
            lineChart.resize();
            radarChart.resize();
        });
    });
    /*]]>*/
</script>
</body>
</html>